
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Slider: Creating a Slider from existing markup</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
    #demo {
        background: #fff;
        border: 1px solid #999;
        color: #000;
    }

    #volume_control {
        height: 22px;
        line-height: 22px;
        background: url("assets/images/bg.png") repeat-x 0 -22px;
        position: relative;
    }

    #volume_control label {
        font-weight: bold;
        height: 22px;
        margin: 0 1ex 0 1em;
        vertical-align: top;
        zoom: 1;
    }

    #volume {
        border: 1px inset #999;
        height: 16px;
        margin: 2px 1ex 0 0;
        padding: 0 3px;
        text-align: right;
        vertical-align: top;
        width: 2em;
    }

    /* Override some default Sam skin styles */
    #volume_control .yui-slider {
        display: block;
        position: absolute;
        top: 22px;
        vertical-align: top;
    }

    #volume_control .yui-slider-rail {
        background: url("assets/images/rail.png") no-repeat 0 0;
        height: 117px;
        width: 17px;
        padding: 0 7px;
    }

    /* Support open/close action for the slider */
    #demo .volume-hide #volume_slider {
        display: none;
    }

    /* Use a sprite for the speaker icon */
    #volume_icon {
        background: url("assets/images/volume_icon.png") no-repeat -30px 0;
        border: none;
        height: 22px;
        overflow: hidden;
        width: 31px;
    }

    /* move the button text offscreen left */
    #volume_icon p {
        text-indent: -9999px;
    }

    #mute {
        background: url("assets/images/bg.png") repeat-x 0 -22px;
        border: none;
        height: 22px;
        vertical-align: top;
    }

    #mute p {
        margin: 0;
    }

    #mute:hover {
        background-position: 0 0;
        color: #fff;
    }
    
    /*
     * adjust the speaker icon sprite in accordance with volume level and
     * active state
    */
    #demo .volume-hide .level_0 { background-position: -31px 0; }
    #demo .volume-hide .level_1 { background-position: -31px -22px; }
    #demo .volume-hide .level_2 { background-position: -31px -44px; }
    #demo .volume-hide .level_3 { background-position: -31px -66px; }

    #demo .level_0,
    #demo .level_0:hover {
        background-position: 0 0;
    }
    #demo .level_1,
    #demo .level_1:hover {
        background-position: 0 -22px;
    }
    #demo .level_2,
    #demo .level_2:hover {
        background-position: 0 -44px;
    }
    #demo .level_3,
    #demo .level_3:hover {
        background-position: 0 -66px;
    }

    #demo .demo-content {
        padding: 1ex 1em;
    }
</style>

</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Slider: Creating a Slider from existing markup</h1></div>
</div>
<div id="bd">

	<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>

	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Slider: Creating a Slider from existing markup</h2>

	<div id="example" class="promo">
	<p>
	<p>This example illustrates how to create a Slider using existing markup.  The <code>boundingBox</code> and <code>contentBox</code> are included in the markup and passed to the constructor.  Standard class names are assigned to the DOM elements inside the <code>contentBox</code> that will result in them being discovered and automatically used.</p>

<p>The visualization of the Slider is based on the volume control in Mac OS X 10.5, with additional controls included for illustration.  <strong>Click on the speaker icon to show the Slider</strong>.</p>

<p>Things to note about this example:</p>
<ul>
    <li>The Slider is rendered into a hidden container, and the <code>syncUI</code> method called when it is made visible</li>
    <li>Some default Sam skin style is overridden to support the implementation</li>
    <li><code>minGutter</code> and <code>maxGutter</code> configuration is used to limit the thumb movement inside the larger rail element and image.</li>
    <li>There is no whitespace in the markup around the thumb's <code>&lt;img&gt;</code> element to avoid an IE layout bug.</li>
</ul>
	</p>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="slider_from_markup_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="demo">

    <div id="volume_control" class="volume-hide">
        <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
        <div id="volume_slider">
            <div id="volume_slider_content">
                <div class="yui-slider-rail">
                    <!-- IE expands whitespace around img tags into padding -->
                    <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
                </div>
            </div>
        </div>
        <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
        <button type="button" title="Mute" id="mute"><p>mute</p></button>
    </div>

    <div class="demo-content">
        <p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>
        <p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>
    </div>
</div>
<script type="text/javascript">
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {

var control    = Y.get('#volume_control'),
    sliderBox  = Y.get('#volume_slider'),
    volInput   = Y.get('#volume'),
    icon       = Y.get('#volume_icon'),
    mute       = Y.get('#mute'),
    open       = false,
    level      = 2,
    beforeMute = 0,
    volume;

sliderBox.setStyle('left',icon.get('offsetLeft')+'px');
    
volume = new Y.Slider({
        boundingBox: sliderBox,
        contentBox : '#volume_slider_content',
        axis       : 'y',
        min        : 100,
        max        : 0,
        value      : 50,
        railSize   : '117px',
        minGutter  : 9,
        maxGutter  : 11
    }).render();

// Initialize event listeners
volume.after('valueChange', updateInput);
volume.after('valueChange', updateIcon);

mute.on('click', muteVolume);

volInput.on({
    keydown: handleInput,
    keyup:   updateVolume
});

icon.on('click', showHideSlider);

Y.on('click', handleDocumentClick, document);

// Support functions
function updateInput(e) {
    if (e.src !== 'KEY') {
        volInput.set('value',e.newVal);
    }
}

function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);

    if (level !== newLevel) {
        icon.replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}

function muteVolume(e) {
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);

    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        this.set('innerHTML','unmute');
        volInput.set('disabled','disabled');
    } else {
        volume.set('value', beforeMute);
        this.set('innerHTML','mute');
        volInput.set('disabled','');
    }
}

function handleInput(e) {
    // Allow only numbers and various other control keys
    if (e.keyCode > 57) {
        e.halt();
    }

    // Stop numbers that would result in a value > 100
    if (e.keyCode >= 48) {
        var val = volInput.get('value'),
            key = e.keyCode - 48;

        if (parseInt(val + key,10) > 100) {
            e.halt();
        }
    }
}

function updateVolume(e) {
    var value = parseInt(volInput.get('value'),10) || 0;

    volume.setValue(value, { src: 'KEY' });
}

function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (open) {
        volume.syncUI();
    }

    if (e) {
        e.preventDefault();
    }
}

function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Start with markup</h3>
<p>For complete control of the DOM structure used by Slider, we'll start with markup that includes the <code>boundingBox</code> and <code>contentBox</code> that wrap all YUI widgets.</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<!-- boundingBox -->
<div id="volume_slider">
    <!-- contentBox -->
    <div id="volume_slider_content">
        <!-- rail -->
        <div>
            <!-- thumb and thumb image (see note above about whitespace) -->
            <div><img src="assets/images/thumb.png" height="17" width="17"></div>
        </div>
    </div>
</div>
</textarea>

<p>Slider is set up to inspect the DOM inside its <code>contentBox</code> for rail, thumb, and thumb image elements.  It does this by searching for specific class names assigned to elements.  Add these classes to the markup and Slider will use those elements rather than create its own.</p>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="volume_slider"><!-- boundingBox -->
    <div id="volume_slider_content"><!-- contentBox -->
        <div class="yui-slider-rail">
            <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
        </div>
    </div>
</div>
</textarea>

<h3>Instantiate the Slider</h3>
<p>With the markup in place, all that's left to do is instantiate the Slider with references to the <code>boundingBox</code> and <code>contentBox</code> elements.  It will automatically discover the nodes already in the markup.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {

var volume = new Y.Slider({
    boundingBox: '#volume_slider',
    contentBox : '#volume_slider_content',
    railSize   : '117px'
});

});
</textarea>

<h3>Anchoring the Slider in a menu bar</h3>
<p>Now we place the Slider markup inside the markup for the rest of the menu bar and wire up the speaker button UI and interaction.  You can see the full CSS and JavaScript for the other controls in the <a href="#full_code_listing">Full Code Listing</a> below.</p>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="volume_control" class="volume-hide">
    <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
    <div id="volume_slider">
        <div id="volume_slider_content">
            <div class="yui-slider-rail">
                <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
            </div>
        </div>
    </div>
    <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
    <button type="button" title="Mute" id="mute"><p>mute</p></button>
</div>
</textarea>

<p>We'll use the following sprite background image to show the appropriate icon for the volume level (quiet to loud) managed by a class applied to the <code>contentBox</code>.</p>

<img src="assets/images/volume_icon.png" alt="image sprite of speaker icon in active and inactive quiet to loud states">

<p>Below is the CSS we'll need to create the appearance.  Note how some Sam skin styles for Slider have been overridden with more specific selectors.</p>
<textarea name="code" class="CSS" cols="60" rows="1">
/* Override some default Sam skin styles */
#volume_control .yui-slider {
    display: block;
    position: absolute;
    top: 22px;
    vertical-align: top;
}

#volume_control .yui-slider-rail {
    background: url("assets/images/rail.png") no-repeat 0 0;
    height: 117px;
    width: 17px;
    padding: 0 7px;
}

/* Use a sprite for the speaker icon */
#volume_icon {
    background: url("assets/images/volume_icon.png") no-repeat -30px 0;
    border: none;
    height: 22px;
    overflow: hidden;
    width: 31px;
}

/*
 * adjust the speaker icon sprite in accordance with volume level and
 * active state
*/
#demo .volume-hide .level_0 { background-position: -31px 0; }
#demo .volume-hide .level_1 { background-position: -31px -22px; }
#demo .volume-hide .level_2 { background-position: -31px -44px; }
#demo .volume-hide .level_3 { background-position: -31px -66px; }

#demo .level_0,
#demo .level_0:hover {
    background-position: 0 0;
}
#demo .level_1,
#demo .level_1:hover {
    background-position: 0 -22px;
}
#demo .level_2,
#demo .level_2:hover {
    background-position: 0 -44px;
}
#demo .level_3,
#demo .level_3:hover {
    background-position: 0 -66px;
}
</textarea>

<p>We'll also set the default volume to 50 and reverse the Slider's <code>min</code> and <code>max</code> so the top corresponds to higher values.  <code>minGutter</code> and <code>maxGutter</code> are also configured to limit the movable range of the thumb on the larger background.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {

var control    = Y.get('#volume_control'),
    icon       = Y.get('#volume_icon'),
    open       = false,
    level      = 2,
    volume;
    
// Notice the chained call to render()
volume = new Y.Slider({
    boundingBox: sliderBox,
    contentBox : '#volume_slider_content',
    axis       : 'y',
    min        : 100,
    max        : 0,
    value      : 50,
    railSize   : '117px',
    minGutter  : 9,
    maxGutter  : 11
}).render();

// Initialize event listeners
volume.after('valueChange', updateIcon);

icon.on('click', showHideSlider);

Y.on('click', handleDocumentClick, 'document');


/*
 * Support functions
 */

// Adjust the class responsible for displaying the correct speaker icon
function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);

    if (level !== newLevel) {
        volume.get('boundingBox').replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}

// Show or hide the Slider in response to clicking on the speaker icon
function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (open) {
        // Needed to correctly place the thumb
        volume.syncUI();
    }
}

// Close the Slider when clicking elsewhere on the page
function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}
</textarea>

<h3 id="full_code_listing">Full Code Listing</h3>
<p>Here is the full markup, CSS, and JavaScript for the entire example, including the volume input and mute controls.</p>

<h4>Markup</h4>
<textarea name="code" class="HTML" cols="60" rows="1">
<div id="demo">
    <div id="volume_control" class="volume-hide">
        <label for="volume">volume</label><input type="text" size="3" maxlength="3" name="volume" id="volume" value="50">
        <div id="volume_slider">
            <div id="volume_slider_content">
                <div class="yui-slider-rail">
                    <!-- IE expands whitespace around img tags into padding -->
                    <div class="yui-slider-thumb"><img class="yui-slider-thumb-image" src="assets/images/thumb.png" height="17" width="17"></div>
                </div>
            </div>
        </div>
        <button type="button" id="volume_icon" class="level_2" title="Open volume slider"><p>Open</p></button>
        <button type="button" title="Mute" id="mute"><p>mute</p></button>
    </div>

    <div class="demo-content">
        <p>Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</p>
        <p>Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.</p>
    </div>
</div>
</textarea>

<h4 id="full_js">JavaScript</h4>
<textarea name="code" class="JScript" cols="60" rows="1">
// Create a YUI instance and request the slider module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("slider", function (Y) {

var control    = Y.get('#volume_control'),
    sliderBox  = Y.get('#volume_slider'),
    volInput   = Y.get('#volume'),
    icon       = Y.get('#volume_icon'),
    mute       = Y.get('#mute'),
    open       = false,
    level      = 2,
    beforeMute = 0,
    volume;

sliderBox.setStyle('left',icon.get('offsetLeft')+'px');
    
volume = new Y.Slider({
        boundingBox: sliderBox,
        contentBox : '#volume_slider_content',
        axis       : 'y',
        min        : 100,
        max        : 0,
        value      : 50,
        railSize   : '117px',
        minGutter  : 9,
        maxGutter  : 11
    }).render();

// Initialize event listeners
volume.after('valueChange', updateInput);
volume.after('valueChange', updateIcon);

mute.on('click', muteVolume);

volInput.on({
    keydown: handleInput,
    keyup:   updateVolume
});

icon.on('click', showHideSlider);

Y.on('click', handleDocumentClick, document);

// Support functions
function updateInput(e) {
    if (e.src !== 'KEY') {
        volInput.set('value',e.newVal);
    }
}

function updateIcon(e) {
    var newLevel = e.newVal && Math.ceil(e.newVal / 34);

    if (level !== newLevel) {
        icon.replaceClass('level_'+level, 'level_'+newLevel);
        level = newLevel;
    }
}

function muteVolume(e) {
    var disabled = !volume.get('disabled');
    volume.set('disabled', disabled);

    if (disabled) {
        beforeMute = volume.getValue();
        volume.setValue(0);
        this.set('innerHTML','unmute');
        volInput.set('disabled','disabled');
    } else {
        volume.set('value', beforeMute);
        this.set('innerHTML','mute');
        volInput.set('disabled','');
    }
}

function handleInput(e) {
    // Allow only numbers and various other control keys
    if (e.keyCode > 57) {
        e.halt();
    }

    // Stop numbers that would result in a value > 100
    if (e.keyCode >= 48) {
        var val = volInput.get('value'),
            key = e.keyCode - 48;

        if (parseInt(val + key,10) > 100) {
            e.halt();
        }
    }
}

function updateVolume(e) {
    var value = parseInt(volInput.get('value'),10) || 0;

    volume.setValue(value, { src: 'KEY' });
}

function showHideSlider(e) {
    control.toggleClass('volume-hide');
    open = !open;

    if (open) {
        volume.syncUI();
    }

    if (e) {
        e.preventDefault();
    }
}

function handleDocumentClick(e) {
    if (open && !icon.contains(e.target) &&
            !volume.get('boundingBox').contains(e.target)) {
        showHideSlider();
    }
}

});
</textarea>

<h4 id="full_css">CSS</h4>
<textarea name="code" class="CSS" cols="60" rows="1">
#demo {
    background: #fff;
    border: 1px solid #999;
    color: #000;
}

#volume_control {
    height: 22px;
    line-height: 22px;
    background: url("assets/images/bg.png") repeat-x 0 -22px;
    position: relative;
}

#volume_control label {
    font-weight: bold;
    height: 22px;
    margin: 0 1ex 0 1em;
    vertical-align: top;
    zoom: 1;
}

#volume {
    border: 1px inset #999;
    height: 16px;
    margin: 2px 1ex 0 0;
    padding: 0 3px;
    text-align: right;
    vertical-align: top;
    width: 2em;
}

/* Override some default Sam skin styles */
#volume_control .yui-slider {
    display: block;
    position: absolute;
    top: 22px;
    vertical-align: top;
}

#volume_control .yui-slider-rail {
    background: url("assets/images/rail.png") no-repeat 0 0;
    height: 117px;
    width: 17px;
    padding: 0 7px;
}

/* Support open/close action for the slider */
#demo .volume-hide #volume_slider {
    display: none;
}

/* Use a sprite for the speaker icon */
#volume_icon {
    background: url("assets/images/volume_icon.png") no-repeat -30px 0;
    border: none;
    height: 22px;
    overflow: hidden;
    width: 31px;
}

/* move the button text offscreen left */
#volume_icon p {
    text-indent: -9999px;
}

#mute {
    background: url("assets/images/bg.png") repeat-x 0 -22px;
    border: none;
    height: 22px;
    vertical-align: top;
}

#mute p {
    margin: 0;
}

#mute:hover {
    background-position: 0 0;
    color: #fff;
}

/*
 * adjust the speaker icon sprite in accordance with volume level and
 * active state
*/
#demo .volume-hide .level_0 { background-position: -31px 0; }
#demo .volume-hide .level_1 { background-position: -31px -22px; }
#demo .volume-hide .level_2 { background-position: -31px -44px; }
#demo .volume-hide .level_3 { background-position: -31px -66px; }

#demo .level_0,
#demo .level_0:hover {
    background-position: 0 0;
}
#demo .level_1,
#demo .level_1:hover {
    background-position: 0 -22px;
}
#demo .level_2,
#demo .level_2:hover {
    background-position: 0 -44px;
}
#demo .level_3,
#demo .level_3:hover {
    background-position: 0 -66px;
}

#demo .demo-content {
    padding: 1ex 1em;
}
</textarea>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Slider Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../slider/slider_basic.html'>Basic Sliders</a></li><li class='selected'><a href='../slider/slider_from_markup.html'>Creating a Slider from existing markup</a></li><li><a href='../dd/photo-browser.html'>Photo Browser (included with examples for Drag &amp; Drop)</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Slider Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/slider/">User's Guide</a> (external)</li> -->
						<li><a href="../../api/module_slider.html">API Documentation</a></li>
</ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="selected "><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
